import React, { useState, useEffect } from 'react';
import { Form, Select, Switch, Card, Typography, Space, Alert, Divider } from 'antd';

const { Option } = Select;
const { Title, Text } = Typography;

interface AdvancedConfig {
  theme: 'light' | 'dark';
  language: 'zh' | 'en';
  autoSave: boolean;
}

interface AdvancedTabProps {
  config: AdvancedConfig;
  onChange: (config: AdvancedConfig) => void;
}

export const AdvancedTab: React.FC<AdvancedTabProps> = ({
  config,
  onChange
}) => {
  const [form] = Form.useForm();
  const [localConfig, setLocalConfig] = useState(config);

  useEffect(() => {
    form.setFieldsValue(config);
    setLocalConfig(config);
  }, [config, form]);

  const handleConfigChange = (field: keyof AdvancedConfig, value: any) => {
    const newConfig = { ...localConfig, [field]: value };
    setLocalConfig(newConfig);
    onChange(newConfig);
    
    // 立即保存到 Chrome Storage
    chrome.storage.sync.set({ advancedConfig: newConfig }, () => {
      if (chrome.runtime.lastError) {
        console.error(`保存高级配置失败: ${chrome.runtime.lastError.message}`);
      }
    });
  };

  return (
    <div 
      style={{
        fontFamily: 'var(--eko-font-family-chinese)',
        fontSize: 'var(--eko-font-size-base)',
        lineHeight: 'var(--eko-line-height-base)',
      }}
    >
      <Title 
        level={3} 
        style={{
          fontFamily: 'var(--eko-font-family-chinese)',
          fontSize: 'var(--eko-font-size-lg)',
          fontWeight: 600,
          color: '#262626',
          marginBottom: '24px'
        }}
      >
        高级设置
      </Title>

      <Space direction="vertical" size="large" style={{ width: '100%' }}>
        {/* 界面设置 */}
        <Card 
          title="界面设置" 
          size="small"
          style={{ 
            fontFamily: 'var(--eko-font-family-chinese)',
          }}
        >
          <Form
            form={form}
            layout="vertical"
            initialValues={config}
          >
            <Form.Item
              name="theme"
              label={
                <span style={{
                  fontFamily: 'var(--eko-font-family-chinese)',
                  fontSize: 'var(--eko-font-size-sm)',
                  fontWeight: 500,
                  color: '#262626'
                }}>
                  主题
                </span>
              }
            >
              <Select
                placeholder="选择主题"
                onChange={(value) => handleConfigChange('theme', value)}
                style={{
                  fontFamily: 'var(--eko-font-family-chinese)'
                }}
              >
                <Option value="light">
                  <span style={{ fontFamily: 'var(--eko-font-family-chinese)' }}>
                    浅色主题
                  </span>
                </Option>
                <Option value="dark">
                  <span style={{ fontFamily: 'var(--eko-font-family-chinese)' }}>
                    深色主题
                  </span>
                </Option>
              </Select>
            </Form.Item>

            <Form.Item
              name="language"
              label={
                <span style={{
                  fontFamily: 'var(--eko-font-family-chinese)',
                  fontSize: 'var(--eko-font-size-sm)',
                  fontWeight: 500,
                  color: '#262626'
                }}>
                  语言
                </span>
              }
            >
              <Select
                placeholder="选择语言"
                onChange={(value) => handleConfigChange('language', value)}
                style={{
                  fontFamily: 'var(--eko-font-family-chinese)'
                }}
              >
                <Option value="zh">
                  <span style={{ fontFamily: 'var(--eko-font-family-chinese)' }}>
                    中文简体
                  </span>
                </Option>
                <Option value="en">
                  <span style={{ fontFamily: 'var(--eko-font-family-chinese)' }}>
                    English
                  </span>
                </Option>
              </Select>
            </Form.Item>
          </Form>
        </Card>

        {/* 行为设置 */}
        <Card 
          title="行为设置" 
          size="small"
          style={{ 
            fontFamily: 'var(--eko-font-family-chinese)',
          }}
        >
          <Space direction="vertical" size="middle" style={{ width: '100%' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div>
                <Text 
                  strong 
                  style={{ 
                    fontFamily: 'var(--eko-font-family-chinese)',
                    fontSize: 'var(--eko-font-size-sm)',
                  }}
                >
                  自动保存
                </Text>
                <div>
                  <Text 
                    type="secondary" 
                    style={{ 
                      fontSize: '12px',
                      fontFamily: 'var(--eko-font-family-chinese)',
                    }}
                  >
                    配置更改时自动保存，无需手动点击保存按钮
                  </Text>
                </div>
              </div>
              <Switch
                checked={localConfig.autoSave}
                onChange={(checked) => handleConfigChange('autoSave', checked)}
              />
            </div>
          </Space>
        </Card>

        <Divider />

        {/* 提示信息 */}
        <Alert
          message="设置说明"
          description={
            <div style={{ fontSize: '12px', fontFamily: 'var(--eko-font-family-chinese)' }}>
              <div>• <strong>主题：</strong>目前仅支持浅色主题，深色主题正在开发中</div>
              <div>• <strong>语言：</strong>更改语言设置需要重新加载扩展页面</div>
              <div>• <strong>自动保存：</strong>启用后配置更改会立即保存到本地存储</div>
            </div>
          }
          type="info"
          showIcon
        />

        {/* 当前配置状态 */}
        <Card 
          title="当前配置状态" 
          size="small"
          style={{ 
            fontFamily: 'var(--eko-font-family-chinese)',
            backgroundColor: '#fafafa'
          }}
        >
          <Space direction="vertical" size="small">
            <div>
              <Text type="secondary" style={{ fontFamily: 'var(--eko-font-family-chinese)' }}>
                主题：<Text code>{localConfig.theme === 'light' ? '浅色主题' : '深色主题'}</Text>
              </Text>
            </div>
            <div>
              <Text type="secondary" style={{ fontFamily: 'var(--eko-font-family-chinese)' }}>
                语言：<Text code>{localConfig.language === 'zh' ? '中文简体' : 'English'}</Text>
              </Text>
            </div>
            <div>
              <Text type="secondary" style={{ fontFamily: 'var(--eko-font-family-chinese)' }}>
                自动保存：<Text code>{localConfig.autoSave ? '已启用' : '已禁用'}</Text>
              </Text>
            </div>
          </Space>
        </Card>
      </Space>
    </div>
  );
};